<template>
  <div class="echarts-line">
    <div
      ref="chart"
      class="chart"
    ></div>
  </div>
</template>

<script>
  // 引入echarts
  import echarts from 'echarts'

  export default {
    name: 'echarts-line',
    props: {
      // 接收父组件传递过来的信息
      chartData: {
        type: Object,
        default: () => {}
      }
    },
    data () {
      return {
        // 图表实例对象
        chartInstance: null,        
      }
    },
    computed: {
      chartOptions () {
        return {
          // title: {
          //   text: this.chartData.title
          // },
          tooltip: {
            trigger: 'axis'
          },
          legend: { 
            data: this.chartData.legend,
            // selected: this.chartData.selected
          },
          grid: {
            left: '3%', 
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          tooltip : {
            trigger: 'axis',
          
            // axisPointer: {
            //   type: 'cross',
            //   label: {
            //     backgroundColor: '#6a7985'
            //   }
            // }
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.chartData.xaxis
          },
          yAxis: {
            type: 'value'
          },
          label: {
            show: true
          },
          series: this.chartData.series
        }
      }
    },
    mounted () {
      this.initChartInstance()
      window.addEventListener('resize', () => this.chartInstance.resize(), false)
    },
    watch: {
      chartData: {
        handler () {
          this.drawChart()
        },
        deep: true,
      }
    },
    methods: {
      /**
       * 初始化图表实例
       */
      initChartInstance () {
        this.chartInstance = echarts.init(this.$refs.chart)
        this.drawChart()
      },
      drawChart () {
        // 绘制图表
        this.chartInstance.setOption(this.chartOptions, true)
        this.chartInstance.resize()
      }
    },
  }
</script>

<style scoped>
  .echarts-line {
    width: 100%; height: 100%;
    

   
  }
  .chart {
      width: 100%; height: 100%;
    }
</style>